<template>
  <a-card v-bind="attrs" style="float: left; width: 100%">
    <div :style="{ height: extendAttrs.height }">
      <s-scroll>
        <dynamic-form ref="dragContext" :form="form" :items="fakeItems" :disable-item="disableItem">
          <template #item="{ properties, type }">
            <slot name="item" :properties="properties" :type="type"></slot>
          </template>
        </dynamic-form>
      </s-scroll>
    </div>
  </a-card>
</template>
<script>
import BaseItem from './BaseItem.js'
import { defineAsyncComponent } from 'vue'
export default {
  name: 'CardItem',
  components: {
    DynamicForm: defineAsyncComponent(() => import('@/components/extends/dynamicForm/index.vue'))
  },
  extends: BaseItem,
  emits: ['change'],
  data() {
    return {
      fakeItems: this.children
    }
  },
  methods: {
    getRefByKey(key) {
      return this.$refs.dragContext.getRefByKey(key)
    }
  }
}
</script>
